<template>
  <div>
    <div style="height:100vh;overflow: scroll;">
      <div class="bgSty">
        <div style="padding:0 20px;position: relative;">
          <img style="position: absolute;left: 30px;top: 23px;" src="../assets/img/common-icon-search-fff.svg" alt=""
            @click="searchh()">
          <input @focus="jumpSearch" type="text" class="inputTaoSty" placeholder="复制标题搜淘宝天猫大额优惠卷">
          <img style="position: relative;right: -13px;top: 21px;width: 25px;" src="../assets/img/home-icon-message.svg"
            alt="消息通知" @click="newsshou()">
        </div>
        <ul class="elementSty" style="white-space: nowrap;overflow-x: scroll;padding:20px 10px;">
          <li style="display: inline-block;text-align: center;color:#fff;font-size: 16px;margin-right: 10px;"
            @click="jumpClass(-1)">
            <div>
              <div :style="classIndex == -1?'opacity: 1':'opacity: .6'">精选</div>
              <div v-if="classIndex == -1" style="border:1px solid #fff;width:30px;margin-top:5px;"></div>
            </div>
          </li>
          <li style="display: inline-block;text-align: center;color:#fff;font-size: 16px;margin-right: 20px;"
            v-for="(val,index) in classList" @click="jumpClass(index,val)">
            <div>
              <div :style="classIndex == index?'opacity: 1':'opacity: .6'">{{val.catName}}</div>
              <div v-if="classIndex == index && val.catName.length==2"
                style="border:1px solid #fff;width:30px;margin-top:5px;"></div>
              <div v-if="classIndex == index && val.catName.length==4"
                style="border:1px solid #fff;width:60px;margin-top:5px;"></div>
            </div>
          </li>
        </ul>
        <div style="background-color: #fff;" v-if="!seletIndexShow">
          <ul class="elementSty" style="padding:10px 0px 20px 0px;">
            <li style="display: inline-block;width:25%;text-align: center;color:#888;font-size: 14px;margin-top:10px;"
              v-for="(val,index) in classTwoList" @click="twoClassCli(val,index)">
              <div>
                <div>
                  <img style="width:50px;height:50px;" :src="val.categoryPictureUrl" alt="">
                </div>
                <div style="margin-top:10px;font-size: 12px;" :class="activeTwoClass == index?'activeClass':''">
                  {{val.categoryName}}</div>
              </div>
            </li>
          </ul>
          <div
            style="border-top: 1px solid #e4e4e4;display: flex;justify-content: space-between;height:50px;line-height: 50px;font-size: 13px;padding: 0px 30px 0px 0px;">
            <div style="display: inline-block;width:20%;" :class="allAct?'divColorSty':''">
              <van-dropdown-menu class="deepSty" style="border-bottom: 1px solid rgba(0,0,0,0);height: 49px;"
                active-color="#FF2E67">
                <van-dropdown-item v-model="value1" :options="option1" />
              </van-dropdown-menu>
            </div>
            <div style="margin-left: -24px;">
              <span :class="numActTop || numActBottom?'colorSty':''">销量</span>
              <div>
                <span @click="selectProduct(2,'bottom')"
                  :class="numActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                <span @click="selectProduct(2,'top')" :class="numActTop?'iconStyTop activeTop':'iconStyTop'"></span>
              </div>
            </div>
            <div>
              <span :class="priceActBottom || priceActTop?'colorSty':''">价格</span>
              <div>
                <span @click="selectProduct(3,'bottom')"
                  :class="priceActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                <span @click="selectProduct(3,'top')" :class="priceActTop?'iconStyTop activeTop':'iconStyTop'"></span>
              </div>
            </div>
            <div>
              <span :class="quanActTop || quanActBottom?'colorSty':''">券额</span>
              <div>
                <span @click="selectProduct(4,'bottom')"
                  :class="quanActBottom?'iconStyBottom activeBottom':'iconStyBottom'"></span>
                <span @click="selectProduct(4,'top')" :class="quanActTop?'iconStyTop activeTop':'iconStyTop'"></span>
              </div>
            </div>
          </div>
          <div style="background-color: #EDEDED;padding:10px;">
            <productList :urlPathVal="classUrl" @numId="getNumId" @proId="getProId" :dataList="objVla"></productList>
          </div>
        </div>
        <div v-show="seletIndexShow" style="margin-top:-15px;">
          <div style="padding:0 10px;margin-top:20px;">
            <!-- <img style="width:100%;border-radius: 9px;" src="@/assets/img/banner01.png" alt=""> -->
            <van-swipe :autoplay="3000">
              <van-swipe-item>
                <img @click="jumpDocument('comfortableMoney')" style="width:100%;border-radius: 10px;"
                  src="../assets/img/shop-banner01.png" />
              </van-swipe-item>
              <van-swipe-item>
                <img @click="jumpDocument('bankToken')" style="width:100%;border-radius: 10px;"
                  src="../assets/img/shop-banner02.png" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="tipSty" style="display: flex;justify-content: space-between;padding:0 20px;">
            <div style="margin-top: 20px;" @click='jumpPage("taobao")'>
              <img style="width:50px;height: 50px;" src="@/assets/img/home-kingicon-taobao.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">淘宝</div>
            </div>
            <div style="margin-top: 20px;" @click='jumpPage("jingdong")'>
              <img style="width:50px;height: 50px;" src="@/assets/img/home-kingicon-jingdong.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">京东</div>
            </div>
            <div style="margin-top: 20px;" @click='jumpPage("pinduoduo")'>
              <img style="width:50px;height: 50px;" src="@/assets/img/home-kingicon-pinduoduo@3x.png" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">拼多多</div>
            </div>
            <div style="margin-top: 20px;">
              <img style="width:50px;height: 50px;" @click="jumpPage('tianmaoChao')"
                src="@/assets/img/home-kingicon-shoptian1.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">天猫超市</div>
            </div>
            <div style="margin-top: 20px;">
              <img style="width:50px;height: 50px;" @click="jumpPage('tianmaoGuo')"
                src="@/assets/img/home-kingicon-shoptian2.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">天猫国际</div>
            </div>
          </div>
          <div class="tipSty" style="display: flex;justify-content: space-between;padding:0 20px;">
            <div style="margin-top: 20px;">
              <img style="width:50px;height: 50px;" @click="jumpPage('99baoyou')"
                src="@/assets/img/home-kingicon-99.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">9.9包邮</div>
            </div>
            <div style="margin-top: 20px;">
              <img style="width:50px;height: 50px;" @click="jumpPage('temai')" src="@/assets/img/home-kingicon-hot.svg"
                alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">爆款特卖</div>
            </div>
            <div style="margin-top: 20px;" @click="jumpPage('chaosheng')">
              <img style="width:50px;height: 50px;" src="@/assets/img/home-kingicon-sheng.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">超省购</div>
            </div>
            <div style="margin-top: 20px;" @click="jumpPage('usergrade')">
              <img style="width:50px;height: 50px;" src="@/assets/img/home-kingicon-my.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">我的权益</div>
            </div>
            <div style="margin-top: 20px;" @click="jumpPage('invitation')">
              <img style="width:50px;height: 50px;" src="@/assets/img/home-kingicon-invite.svg" alt="">
              <div style="color:#888;text-align: center;margin-top: 4px;">邀请好友</div>
            </div>
          </div>
          <div style="padding:0 20px;width:100%;">
            <div class="hotInput">
              <div style="line-height: 40px;">
                <!-- <img style='margin-top:8px;' src="../assets/img/img_1.png" alt=""> -->
                <span
                  style="background: #f5222d12;color:#F5222D;padding:4px;border-radius: 4px;margin-left:5px;">热点</span>
              </div>
              <van-swipe v-if='nocite1.length>0' style="height: 40px;line-height:40px;width:80%;"
                :show-indicators="false" vertical :touchable="false" :autoplay="3000">
                <van-swipe-item style="width:100%;overflow:hidden;" v-for='(val,index) in nocite1' :key="index">
                  <span style="display: inline-block;width:90%;" @click="itemCli(val.numIid)">{{val.title}}</span>
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>
          <div style="background: #ebedf0;padding: 1px 0 20px 0;">
            <!-- <div style="font-size: 18px;font-weight: bold;padding:20px;text-align:left;">精选活动</div> -->
            <div style="padding:0 10px;margin-bottom: 50px;">
              <!-- <div>
                <div>
                  <img style="width:100%;border-radius: 9px;" src="../assets/img/banner02.png" alt="">
                </div>
                <div style="background: #fff;border-radius: 6px;padding:10px 5px;position: relative;top: -50px;">
                  <ul class="elementSty" style="white-space: nowrap;overflow-x: scroll;">
                    <li style="display: inline-block;width:100px;">
                      <div>
                        <img style="width:90px;height:90px;" src="../assets/img/tao2.png" alt="">
                      </div>
                      <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: 12px;">一是康寿皮肤大叔
                      </div>
                      <div>
                        <span style="font-size: 18px;color:#FF2E67;">￥21.50</span>
                        <span
                          style="border:1px solid rgba(136, 136, 136, 0.2);color:#888;font-size: 10px;border-radius: 3px;padding:2pt;">券后</span>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div style="margin-top:-40px;">
                <div>
                  <img style="width:100%;border-radius: 9px;" src="../assets/img/banner03.png" alt="">
                </div>
                <div style="background: #fff;border-radius: 6px;padding:10px 5px;position: relative;top: -50px;">
                  <ul class="elementSty" style="white-space: nowrap;overflow-x: scroll;">
                    <li style="display: inline-block;width:100px;">
                      <div>
                        <img style="width:90px;height:90px;" src="../assets/img/tao2.png" alt="">
                      </div>
                      <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size: 12px;">一是康寿皮肤大叔
                      </div>
                      <div>
                        <span style="font-size: 18px;color:#FF2E67;">￥21.50</span>
                        <span
                          style="border:1px solid rgba(136, 136, 136, 0.2);color:#888;font-size: 10px;border-radius: 3px;padding:2pt;">券后</span>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div style="margin-top:-40px;">
                <div
                  style="display: flex;justify-content: space-between;padding:10px 20px;background: #f6414b;color:#fff;border-radius: 6px 6px 0 0;">
                  <div>
                    <div><img src="../assets/img/seckill-img.png" alt=""></div>
                    <van-count-down :time="time">
                      <template v-slot="timeData">
                        <span class="item">{{ timeData.hours }}</span><span style="color:#fff">:</span>
                        <span class="item">{{ timeData.minutes }}</span><span style="color:#fff">:</span>
                        <span class="item">{{ timeData.seconds }}</span>
                      </template>
                    </van-count-down>
                  </div>
                  <div style="display: flex;justify-content: space-between;">
                    <div>
                      <div style="font-size: 16px;font-weight: bold;padding:5px 10px;">16:00</div>
                      <div style="text-align: center;">抢购中</div>
                    </div>
                    <div>
                      <div style="font-size: 16px;font-weight: bold;padding:5px 10px;">18:00</div>
                      <div style="text-align: center;">即将开抢</div>
                    </div>
                    <div>
                      <div style="font-size: 16px;font-weight: bold;padding:5px 10px;">20:00</div>
                      <div style="text-align: center;">即将开抢</div>
                    </div>
                  </div>
                </div>
                <div style="background: linear-gradient(#e66465, #fff);border-radius: 0 0 6px 6px;padding:5px 0 20px 0">
                  <van-swipe class="my-swipe" :loop="false" :show-indicators="false">
                    <van-swipe-item>
                      <ul style="display: flex;justify-content: space-around;">
                        <li style="width:100px;border-radius: 6px;">
                          <div>
                            <img style="width:100%;height:100px;border-radius: 6px;" src="../assets/img/tao2.png" alt="">
                          </div>
                          <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px;">一是康寿皮肤大叔
                          </div>
                          <div>
                            <span style="font-size: 18px;color:#FF2E67;">￥21.50</span>
                            <span
                              style="border:1px solid rgba(255, 46, 103, 0.2);color:#FF2E67;font-size: 10px;border-radius: 3px;padding:2pt;">券后</span>
                          </div>
                        </li>
                      </ul>
                    </van-swipe-item>
                    <van-swipe-item>
                      <ul style="display: flex;justify-content: space-around;">
                        <li style="width:100px;border-radius: 6px;background: #fff;">
                          <div>
                            <img style="width:100%" src="../assets/img/tao2.png" alt="">
                          </div>
                          <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">一是康寿皮肤大叔</div>
                          <div>
                            券后：<span>￥21.50</span>
                          </div>
                        </li>
                      </ul>
                    </van-swipe-item>
                  </van-swipe>
                </div>
              </div> -->
              <div style="font-size: 18px;font-weight: bold;padding:20px 20px 0 10px;text-align: left;">为你推荐</div>
              <div style="margin-top:20px;">
                <productList @proId="getProId" @numId="getNumId" :urlPathVal="indexUrl"></productList>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <van-notice-bar v-if="tokenVale && nocite2.length>0" mode="closeable" style="position: absolute;width: 100%;bottom: 50px;"
        :text="nocite2[0].noticeContent" color="#fff" background="rgba(0,0,0,.5)"
        left-icon="volume-o" /> -->
      <div v-if="!tokenVale"
        style="position: fixed;bottom: 50px;height:40px;line-height: 40px;width: 100%;background-color: rgba(0,0,0,.5);">
        <img style="margin-top: 12px;width: 22px;margin-left:10px;" src="../assets/img/home-icon-coupon.svg" alt="">
        <span style="font-size: 14px;color: #fff;margin-left: 8px;">登录领取淘宝大额优惠券</span>
        <span
          style="height: 25px;background-color: #FF2E67;color: #fff;font-size: 14px;padding: 5px 15px;border-radius: 12px;float: right;line-height: 15px;margin-top: 8px;margin-right:10px;"
          @click="jumpLogin()">登录</span>
      </div>
      <homeIndex></homeIndex>
    </div>
    <div v-if="showDetail" style="position: absolute;top:0;z-index: 1000;width: 100%;">
      <detailsPage @getShow="getShow" :tranmitId="proId" :typeShop="typeShop"></detailsPage>
    </div>
    <div v-if="creatShareShow" style="position: absolute;top:0;z-index: 1000;width: 100%;">
      <creatShare :numId="numId" @returnPage="returnCurrentPage"></creatShare>
    </div>
  </div>
</template>

<script>
  import { Swipe, SwipeItem, NoticeBar, CountDown, DropdownItem, DropdownMenu, Toast } from 'vant';
  import productList from './public/productList.vue';
  import creatShare from './creatShare.vue';
  import detailsPage from './public/detailsPage.vue';
  import homeIndex from "./homeIndex";

  export default {
    name: 'homePage',
    components: {
      [CountDown.name]: CountDown,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [NoticeBar.name]: NoticeBar,
      [DropdownMenu.name]: DropdownMenu,
      [DropdownItem.name]: DropdownItem,
      productList,
      detailsPage,
      homeIndex,
      creatShare
    },
    data() {
      return {
        typeShop: 'taobao',
        creatShareShow: false,
        showDetail: false,
        activeTwoClass: -1,
        objVla: {},
        classUrl: "homeClass",
        indexUrl: "index",
        categoryUrl: 'category',
        time: 30 * 60 * 60 * 1000,
        value1: 0,
        option1: [
          { text: '综合', value: 0 },
          { text: '佣金比例由高到低', value: 1 },
          { text: '佣金比例由低到高', value: 2 },
        ],
        numActTop: false,
        numActBottom: false,
        priceActTop: false,
        priceActBottom: false,
        quanActTop: false,
        quanActBottom: false,
        allAct: true,
        seletIndexShow: true,
        tokenVale: "",
        classList: [],
        classTwoList: [],
        classIndex: -1,
        catId: "",
        proId: "",
        nocite1: [],
        nocite2: [],
        numId: ''
      }
    },
    // computed: {
    //   ...mapGetters([
    //     'returnVal'
    //   ])
    // },
    watch: {
      value1(val) {
        this.numActTop = false;
        this.numActBottom = false;
        this.priceActTop = false;
        this.priceActBottom = false;
        this.quanActTop = false;
        this.quanActBottom = false;
        this.allAct = true;
      }
    },
    mounted() {
      window.addEventListener('setItem', (e) => {
        if (e.key == 'returnVal' && e.newValue == 'true') {
          this.showDetail = false;
          this.creatShareShow = false;
        }
      });
      this.$store.dispatch('updataActive', 0)
      this.tokenVale = localStorage.getItem('token');
      this.initData();
      navigator.clipboard.readText().then(text => { console.log(text); }).catch(err => { console.error('Failed to read clipboard contents: ', err); });

    },
    methods: {
      jumpDocument(str) {
        this.$router.push('/' + str);
      },
      //热点跳转到详情页
      itemCli(id) {
        this.proId = id;
        this.showDetail = true;
      },
      returnCurrentPage(data) {
        this.creatShareShow = data;
      },
      getProId(data) {
        this.proId = data;
        this.showDetail = true;
      },
      getNumId(data) {
        this.numId = data;
        this.creatShareShow = true;
      },
      getShow(data) {
        this.showDetail = data;
      },
      jumpSearch() {
        this.$router.push('/searchPage');
      },
      jumpPage(str) {
        if (str == "taobao") {
          this.$router.push('/taobaoListPage');
        } else if (str == "jingdong") {
          if (this.tokenVale) {
            this.$router.push('/jingdongListPage');
          } else {
            this.$router.push('/login')
          }
          // Toast('敬请期待')
        } else if (str == "pinduoduo") {
          this.$router.push('/pinduoduoListPage');
        } else if (str == "invitation") {
          if (this.tokenVale) {
            this.$router.push('/invitation')
          } else {
            this.$router.push('/login')
          }
        } else if (str == "chaosheng") {
          if (this.tokenVale) {
            this.$router.push('/mallPage/2')
          } else {
            this.$router.push('/login')
          }
        } else if (str == "temai") {
          if (this.tokenVale) {
            this.$router.push('/mallPage/1')
          } else {
            this.$router.push('/login')
          }
        } else if (str == "99baoyou") {
          if (this.tokenVale) {
            this.$router.push('/nineListPage')
          } else {
            this.$router.push('/login')
          }
        } else if (str == 'usergrade') {
          if (this.tokenVale) {
            this.$router.push('/usergrade')
          } else {
            this.$router.push('/login')
          }
        } else if (str == 'tianmaoChao') {
          this.$router.push('/tianmaoPage/tianmaoChao')
        } else if (str == 'tianmaoGuo') {
          this.$router.push('/tianmaoPage/tianmaoGuo')
        } else {
          Toast('敬请期待')
        }
      },
      twoClassCli(val, index) {
        this.activeTwoClass = index;
        this.objVla = val;
      },
      jumpClass(num, val) {
        this.objVla = val;
        this.classIndex = num;
        if (num == -1) {
          this.seletIndexShow = true;
        } else {
          this.catId = val.catId;
          this.seletIndexShow = false;
          var list = {
            catId: val.catId,

          };
          this.$http.post(this.utils.config + "/netmall/app/taobao/api/app/classify/skipProduct?catId=" + val.catId,).then((data) => {
            console.log(data)
            if (data.data.success) {
              this.classTwoList = data.data.result.tbMnCatItemList;
            }
          })
        }
      },
      initData() {
        this.$http.get(this.utils.config + "/netmall/app/taobao/api/app/classify/getCats").then((data) => {
          if (data.data.success) {
            this.classList = data.data.result;
          }
        })
        this.$http.post(this.utils.config + "/netmall/app/taobao/api/getUserAllNotice?noticeType=2").then((data) => {
          if (data.data.success) {
            this.nocite2 = data.data.result.records;
          }
        })
        this.$http.get(this.utils.config + "/netmall/app/taobao/api/getTop100").then((data) => {
          if (data.data.code == 200) {
            this.nocite1 = data.data.result;
          }
        })
      },
      tabClick(index) { },
      jumpLogin() {
        this.$router.push('/login');
      },
      newsshou() {
        if (this.tokenVale) {
          this.$router.push('/newshou');
        } else {
          this.$router.push('/login');
        }
      },
      searchh() {
        this.$router.push('/sherch');
      },
      selectProduct(num, str) {
        this.numActTop = false;
        this.numActBottom = false;
        this.priceActTop = false;
        this.priceActBottom = false;
        this.quanActTop = false;
        this.quanActBottom = false;
        this.allAct = false;
        if (num == 2) {
          if (str == 'top') this.numActTop = true;
          if (str == 'bottom') this.numActBottom = true;
        }
        if (num == 3) {
          if (str == 'top') this.priceActTop = true;
          if (str == 'bottom') this.priceActBottom = true;
        }
        if (num == 4) {
          if (str == 'top') this.quanActTop = true;
          if (str == 'bottom') this.quanActBottom = true;
        }
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .bgSty {
    background: url("../assets/img/bg_1.png") repeat;
    width: 100%;
    height: 200px;
    background-size: 100% 100%;
  }

  .inputTaoSty {
    padding: 0 10px;
    padding-left: 40px;
    background: #f17ea0;
    width: 70%;
    height: 46px;
    border-radius: 10px;
    border: none;
    margin-top: 10px;
  }

  .tipSty>img {
    width: 60px;
    height: 76px;
    margin-top: 15px;
  }

  input::placeholder {
    color: white;
  }

  .hotInput {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 0 15px;
    width: 100%;
    border-radius: 36px;
    border: 1px solid #99999957;
    box-sizing: border-box;
  }

  .elementSty::-webkit-scrollbar {
    display: none
  }

  .item {
    display: inline-block;
    width: 22px;
    border-radius: 6px;
    margin-right: 5px;
    color: #f6414b;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
  }

  .willSty {
    color: #F5222D;
    background: #fff;
  }

  .deepSty /deep/ .van-ellipsis {
    font-size: 13px !important;
  }

  .deepSty /deep/ .van-dropdown-menu__title::after {
    border-color: transparent transparent #D8D8D8 #D8D8D8;
  }

  .divColorSty /deep/ .van-ellipsis {
    color: #FF2E67 !important;
  }

  .divColorSty /deep/ .van-dropdown-menu__title::after {
    border-color: transparent transparent #FF2E67 #FF2E67;
  }

  .iconStyTop {
    position: relative;
    top: -38px;
    left: 25px;
    width: 0;
    height: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 4px solid #D8D8D8;
  }

  .iconStyBottom {
    position: relative;
    top: -63px;
    left: 33px;
    width: 0;
    height: 0;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 4px solid #D8D8D8;
  }

  .activeTop {
    border-top: 4px solid #FF2E67 !important;
  }

  .activeBottom {
    border-Bottom: 4px solid #FF2E67 !important;
  }

  .colorSty {
    color: #FF2E67 !important;
  }

  .activeClass {
    color: #FF0C4E;
  }
</style>